import localStore from '@Components/assets/js/utils/localStore'
import { getAttrs } from '../utils'

export default {
  props: {
    // 初始化隐藏的列名
    initHideColumn: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      columnSettingDialog: {
        visible: false,
        columns: []
      },
      excludeColumns: ['_seq', '_select', '_expand']
    }
  },
  mounted() {
    this.checkSortColumn()
    this.checkHideColumn()
  },
  computed: {
    resizableConfig() {
      const minWidth = getAttrs(this, 'resizableConfig')?.minWidth
      return {
        minWidth: minWidth || 100
      }
    }
  },
  methods: {
    handleFullColumnSort() {
      const tableSort = localStore.getTableColumnSort(this.id)
      const { fullColumn } = this._getTableColumn()
      const fullColumnMap = {}
      const fullColumnName = []

      fullColumn.forEach(i => {
        const property = i.property
        fullColumnMap[property] = i
        fullColumnName.push(property)
      })

      // 已排序的实际渲染列
      const sortFullCol = [
        ...this.excludeColumns,
        ...(tableSort.filter(i => fullColumnName.includes(i)) || [])
      ]
      // 剩余未排序的实际渲染的列
      let unSortFullCol = fullColumnName.filter(i => !sortFullCol.includes(i))
      return { sortedColumns: sortFullCol.concat(unSortFullCol), fullColumnMap }
    },
    // 检查是否开启了列的自定义排序
    checkSortColumn() {
      if (this.id) {
        const newColumn = []
        const { sortedColumns, fullColumnMap } = this.handleFullColumnSort()
        sortedColumns.forEach(i => {
          fullColumnMap[i] && newColumn.push(fullColumnMap[i])
        })
        this._loadColumn(newColumn)
      }
    },
    // 勾选表格列配置
    /**
     * @param data { Array<{ checked: boolean; value: string; label: string; }> }
     */
    handleColumnSettingClick(data) {
      const sortedColumn = []
      const hiddenColumn = []

      data.forEach(i => {
        sortedColumn.push(i.value)
        if (!i.checked) {
          hiddenColumn.push(i.value)
        }
      })

      localStore.setTableColumnSort(this.id, sortedColumn)
      localStore.setTableHideColumn(this.id, hiddenColumn)

      this.checkSortColumn()
      this.checkHideColumn()
    },
    // 打开表格列配置
    handleOpenColumnSetting() {
      this._handleColumnSettingInit()
      this.columnSettingDialog.visible = true
    },
    // 表格列配置初始化数据
    _handleColumnSettingInit() {
      const { sortedColumns, fullColumnMap } = this.handleFullColumnSort()
      const hideColumn = localStore.getTableColumnHideMap()[this.id]
        ? localStore.getTableHideColumn(this.id)
        : this.initHideColumn
      const columns = []
      sortedColumns.forEach(property => {
        if (!this.excludeColumns.includes(property)) {
          const col = fullColumnMap[property]
          columns.push({
            label: col.title,
            value: col.property,
            checked: !hideColumn.includes(col.property)
          })
        }
      })
      this.columnSettingDialog.columns = columns
    },
    // 检查是否过滤隐藏了列
    checkHideColumn() {
      const { collectColumn } = this._getTableColumn()
      const hideColumn = localStore.getTableColumnHideMap()[this.id]
        ? localStore.getTableHideColumn(this.id)
        : this.initHideColumn

      collectColumn.forEach(column => {
        column.visible = !hideColumn.includes(column.property)
      })
      this._refreshColumn()
    }
  }
}
